<template>
      <el-card style="max-width: 3000px">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-top: 15px;margin-left: 30px;">
          <el-form-item label="供应商名称">
            <el-input v-model="formInline.SuppliersName" placeholder="请输入供应商名称" clearable />
          </el-form-item>
          <el-form-item label="办公电话">
            <el-input v-model="formInline.OfficePhone" placeholder="请输入办公电话" clearable />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formInline.Phone" placeholder="请输入手机号" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getsuppliers">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-container style="margin-top: 20px; margin-left: 10px;">
         <el-card style="width: 250px">
            <el-tree
            style="max-width: 600px"
            :data="data"
            show-radio
            node-key="id"
           :default-expanded-keys="[2, 3,4,5,6,7,8,9,10 ,11,12,13,14,15,16,17,18,19]"
          
            :props="defaultProps"
          />
        </el-card>
       <el-card style="width: 2000px ;margin-left: 10px;">
          <el-button style="width: 100px;margin-top: 0px;" type="success" @click="dialogVisible = true">新增</el-button>
          <el-table :data="tableData" style="width: 100%;height: 690px;">
            <el-table-column type="index" label="序号" width="90" />
            <el-table-column prop="suppliersName" label="供应商名称" width="120" />
            <el-table-column prop="suppliersCode" label="供应商编号" width="150" />
            <el-table-column prop="classifyName" label="供应商类别名称" width="150" />
            <el-table-column prop="province" label="所在省份" width="120" />
            <el-table-column prop="city" label="所在市" width="120" />
            <el-table-column prop="contact" label="联系人" width="120" />
            <el-table-column prop="department" label="部门" width="120" />
            <el-table-column prop="posts" label="职位" width="120" />
            <el-table-column prop="officePhone" label="办公电话" width="120" />
            <el-table-column prop="phone" label="手机号" width="120" />
            <el-table-column fixed="right" label="操作" min-width="120">
              <template #default="scope">
                <el-button  type="danger" size="small" @click="delsupplier(scope.row.id)">
                  删除
                </el-button>
                <el-button  type="primary" size="small" @click="getsuppliersdesc(scope.row.id)">详情</el-button>
                <el-button  type="warning" size="small" @click="openeidt(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 新增弹出框 -->
           <el-dialog
              v-model="dialogVisible"
              title="新增供应商"
              width="700"
            >
              <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="ruleForm"
              :rules="rules"
              label-width="auto"
            >
           <el-row>
              <el-col :span="12">
                 <el-form-item label="供应商名称" prop="suppliersName">
                <el-input v-model="ruleForm.suppliersName" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="供应商类型" prop="suppliersTypeId">
                <el-select v-model="ruleForm.suppliersTypeId" placeholder="请选择类型">
                  <el-option v-for="a in typedata" :label="a.classifyName" :value="a.id" :key="a.id"/>
                </el-select>
              </el-form-item>
              </el-col>
           </el-row>

              <el-row>
              <el-col :span="12">
                 <el-form-item label="所属省份" prop="province">
                <el-select placeholder="请选择省份" @change="handleProvinceChange" v-model="ruleForm.province" style="width: 210px;margin-right: 20px;">
                  <el-option v-for="a in provinceList" :key="a.value" :label="a.label" :value="a.label" />
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属市" prop="city">
                <el-select placeholder="请选择市"  v-model="ruleForm.city" >
            <el-option v-for="a in cityList" :key="a.value" :label="a.label" :value="a.label" />
          </el-select>
              </el-form-item>
              </el-col>
           </el-row>
           <el-row>
              <el-col :span="12">
                 <el-form-item label="联系人" prop="contact">
                <el-input v-model="ruleForm.contact" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="部门" prop="department">
                <el-input v-model="ruleForm.department" />
              </el-form-item>
              </el-col>
           </el-row>
           <el-row>
              <el-col :span="12">
                <el-form-item label="职位" prop="posts">
                <el-input v-model="ruleForm.posts" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="办公电话" prop="officePhone">
                <el-input v-model="ruleForm.officePhone" />
              </el-form-item>
              </el-col>
           </el-row>

              <el-row>
              <el-col :span="12">
                <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司简介" prop="companyProfile">
                <el-input v-model="ruleForm.companyProfile" />
              </el-form-item>
              </el-col>
           </el-row>
              <el-row>
              <el-col :span="12">
               <el-form-item label="合作情况" prop="cooperationBrie">
                <el-input v-model="ruleForm.cooperationBrie" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户银行" prop="bankofDeposit">
                <el-input v-model="ruleForm.bankofDeposit" />
              </el-form-item>
              </el-col>
           </el-row>
               <el-row>
              <el-col :span="12">
               <el-form-item label="银行账户" prop="accountName">
                <el-input v-model="ruleForm.accountName" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账户名称" prop="bankAccount">
                <el-input v-model="ruleForm.bankAccount" />
              </el-form-item>
              </el-col>
           </el-row>
            <el-row>
              <el-col :span="12">
              <el-form-item label="银行地址" prop="bankAddr">
                <el-input v-model="ruleForm.bankAddr" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行手机号" prop="bankPhone">
                <el-input v-model="ruleForm.bankPhone" />
              </el-form-item>
              </el-col>
           </el-row>

           <el-form-item label="材料证明" prop="name">
                <el-upload
                class="avatar-uploader"
                action="http://47.99.42.133:8000/procurementwrite/api/Upfile/File"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="ruleForm.photo" :src="ruleForm.photo" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
          </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                  保存
                </el-button>
                
              </el-form-item>
            </el-form>
            </el-dialog>
           <!--  修改弹出框 -->
             <el-dialog
              v-model="dialogVisibleupdate"
              title="修改供应商"
              width="700"
             
            >
              <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="ruleForm1"
              :rules="rules"
              label-width="auto"
            >
           <el-row>
              <el-col :span="12">
                 <el-form-item label="供应商名称" prop="suppliersName">
                <el-input v-model="ruleForm1.suppliersName" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="供应商类型" prop="suppliersTypeId">
                <el-select v-model="ruleForm1.suppliersTypeId" placeholder="请选择类型">
                  <el-option v-for="a in typedata" :label="a.classifyName" :value="a.id" :key="a.id"/>
                </el-select>
              </el-form-item>
              </el-col>
           </el-row>

              <el-row>
              <el-col :span="12">
                 <el-form-item label="所属省份" prop="province">
                <el-select placeholder="请选择省份" @change="handleProvinceChange" v-model="ruleForm1.province" style="width: 210px;margin-right: 20px;">
                  <el-option v-for="a in provinceList" :key="a.value" :label="a.label" :value="a.label" />
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属市" prop="city">
                <el-select placeholder="请选择市"  v-model="ruleForm1.city" >
            <el-option v-for="a in cityList" :key="a.value" :label="a.label" :value="a.label" />
          </el-select>
              </el-form-item>
              </el-col>
           </el-row>

           <el-row>
              <el-col :span="12">
                 <el-form-item label="联系人" prop="contact">
                <el-input v-model="ruleForm1.contact" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="部门" prop="department">
                <el-input v-model="ruleForm1.department" />
              </el-form-item>
              </el-col>
           </el-row>

           <el-row>
              <el-col :span="12">
                <el-form-item label="职位" prop="posts">
                <el-input v-model="ruleForm1.posts" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="办公电话" prop="officePhone">
                <el-input v-model="ruleForm1.officePhone" />
              </el-form-item>
              </el-col>
           </el-row>

              <el-row>
              <el-col :span="12">
                <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm1.phone" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司简介" prop="companyProfile">
                <el-input v-model="ruleForm1.companyProfile" />
              </el-form-item>
              </el-col>
           </el-row>
              <el-row>
              <el-col :span="12">
               <el-form-item label="合作情况" prop="cooperationBrie">
                <el-input v-model="ruleForm1.cooperationBrie" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户银行" prop="bankofDeposit">
                <el-input v-model="ruleForm1.bankofDeposit" />
              </el-form-item>
              </el-col>
           </el-row>
               <el-row>
              <el-col :span="12">
               <el-form-item label="银行账户" prop="accountName">
                <el-input v-model="ruleForm1.accountName" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账户名称" prop="bankAccount">
                <el-input v-model="ruleForm1.bankAccount" />
              </el-form-item>
              </el-col>
           </el-row>
              
            <el-row>
              <el-col :span="12">
              <el-form-item label="银行地址" prop="bankAddr">
                <el-input v-model="ruleForm1.bankAddr" />
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行手机号" prop="bankPhone">
                <el-input v-model="ruleForm1.bankPhone" />
              </el-form-item>
              </el-col>
           </el-row>

           <el-form-item label="材料证明" prop="name">
                <el-upload
                class="avatar-uploader"
                action="http://47.99.42.133:8000/procurementwrite/api/Upfile/File"
                :show-file-list="false"
                :on-success="updatehandleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="ruleForm1.photo" :src="ruleForm1.photo" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
          </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="updatesubmitForm(ruleFormRef)">
                  修改
                </el-button>
                
              </el-form-item>
            </el-form>
            </el-dialog>
            <!--  详情弹出框 -->
            <el-dialog
              v-model="dialogVisibledesc"
              title="供应商详情"
              width="700"
            >
              <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="ruleFormDesc"
              :rules="rules"
              label-width="auto"
            >
           <el-row>
              <el-col :span="12">
                 <el-form-item label="供应商名称" >
                <el-input v-model="ruleFormDesc.suppliersName" disabled/>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="供应商类型" >
                <el-select v-model="ruleFormDesc.suppliersTypeId" placeholder="请选择类型" disabled>
                  <el-option v-for="a in typedata" :label="a.classifyName" :value="a.id" :key="a.id"/>
                </el-select>
              </el-form-item>
              </el-col>
           </el-row>

              <el-row>
              <el-col :span="12">
                 <el-form-item label="所属省份"  disabled>
                <el-select placeholder="请选择省份" @change="handleProvinceChange" v-model="ruleFormDesc.province" style="width: 210px;margin-right: 20px;" disabled>
                  <el-option v-for="a in provinceList" :key="a.value" :label="a.label" :value="a.label" disabled/>
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属市"  disabled>
                <el-select placeholder="请选择市"  v-model="ruleFormDesc.city"  disabled>
            <el-option v-for="a in cityList" :key="a.value" :label="a.label" :value="a.label" disabled/>
          </el-select>
              </el-form-item>
              </el-col>
           </el-row>
           <el-row>
              <el-col :span="12">
                 <el-form-item label="联系人"  >
                <el-input v-model="ruleFormDesc.contact" disabled/>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="部门"  >
                <el-input v-model="ruleFormDesc.department" disabled/>
              </el-form-item>
              </el-col>
           </el-row>
           <el-row>
              <el-col :span="12">
                <el-form-item label="职位"  >
                <el-input v-model="ruleFormDesc.posts" disabled/>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="办公电话"  >
                <el-input v-model="ruleFormDesc.officePhone" disabled/>
              </el-form-item>
              </el-col>
           </el-row>

              <el-row>
              <el-col :span="12">
                <el-form-item label="手机号" >
                <el-input v-model="ruleFormDesc.phone" disabled/>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="公司简介" >
                <el-input v-model="ruleFormDesc.companyProfile" disabled/>
              </el-form-item>
              </el-col>
           </el-row>
              <el-row>
              <el-col :span="12">
               <el-form-item label="合作情况" >
                <el-input v-model="ruleFormDesc.cooperationBrie" disabled/>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户银行" >
                <el-input v-model="ruleFormDesc.bankofDeposit" disabled/>
              </el-form-item>
              </el-col>
           </el-row>
               <el-row>
              <el-col :span="12">
               <el-form-item label="银行账户" >
                <el-input v-model="ruleFormDesc.accountName" disabled/>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账户名称" >
                <el-input v-model="ruleFormDesc.bankAccount" disabled/>
              </el-form-item>
              </el-col>
           </el-row>
            <el-row>
              <el-col :span="12">
              <el-form-item label="银行地址" >
                <el-input v-model="ruleFormDesc.bankAddr" disabled/>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行手机号" >
                <el-input v-model="ruleFormDesc.bankPhone" disabled/>
              </el-form-item>
              </el-col>
           </el-row>

           <el-form-item label="材料证明">
                <el-upload
                class="avatar-uploader"
                action="http://47.99.42.133:8000/procurementwrite/api/Upfile/File"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="ruleFormDesc.photo" :src="ruleFormDesc.photo" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
          </el-form-item>
              </el-form>
            </el-dialog>
            <div class="demo-pagination-block" style="margin-top: 20px;">
              <table>
                <tr>
                <td>
                  <el-pagination
                    v-model:current-page="page.Index"
                    v-model:page-size="page.Size"
                    :page-sizes="[15, 20]"
                    :background=true
                    layout="slot, sizes"
                    :total="page.Count"
                  >
                  <span>共{{ page.Count }}条，当前{{ page.Index }}/{{ page.Pcount }}页</span>
                  </el-pagination>
                </td>
                <td>
                  <el-pagination
                    v-model:current-page="page.Index"
                    v-model:page-size="page.Size"
                    :page-sizes="[15, 20]"
                    :background=true
                    layout="slot,  prev, pager, next"
                    :total="page.Count"
                  >
                  <button>首页</button>
                  </el-pagination>
                </td>
                <td>
                  <el-pagination
                    v-model:current-page="page.Index"
                    v-model:page-size="page.Size"
                    :page-sizes="[15, 20]"
                    :background=true
                    layout="slot, jumper"
                    :total="page.Count"
                  >
                  <button>尾页</button>
                  </el-pagination>
                </td>
              </tr>
              </table>
              
            </div>
      </el-card>
          
        
      </el-container>

</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";
import { onMounted, ref } from "vue";
import { read } from "../../stores/host";
import { ElButton, ElMessageBox } from "element-plus";
import { regionData } from 'element-china-area-data'
onMounted(() => {
  getsuppliers();
  gettype();
  getcalssfiytype();
});

//条件查询
const formInline = reactive({
  SuppliersName: "",
  OfficePhone: "",
  Phone: "",
});
const page = ref({
  Index: 1,
  Size: 15,
  Pcount: 0,
  Count: 0,
});
const tableData = ref([]);
const getsuppliers = () => {
  
  read.get("procurementread/api/Procurement/GetSuppliers", {
    params: {
      SuppliersName: formInline.SuppliersName,
      OfficePhone: formInline.OfficePhone,
      Phone: formInline.Phone,
      Index: page.value.Index,
      Size: page.value.Size,
    },
  }).then((res) => {
    tableData.value = res.data.datas.filter(item=>item.isDelete===false);
    page.value.Count=res.data.totalCount;
    page.value.Pcount=res.data.totalPage;
  });
};

watch(page.value,()=>{
  getsuppliers();
},{deep:true})
watch(formInline,()=>{
  getsuppliers();
},{deep:true})

const data = ref([]);
const defaultProps = {
  children: "children",
  label: "classifyName",
  id: "id",
};
const gettype = () => {
  read.get("procurementread/api/Procurement/GetSuppliersType").then((res) => {
    data.value = res.data.data;
  });
};



//新增
const dialogVisible = ref(false);
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  suppliersName: '',
  suppliersCode: '',
  suppliersTypeId: '',
  province: '',
  city: '',
  contact: '',
  department: '',
  posts: '',
  officePhone: '',
  phone: '',
  companyProfile: '',
  cooperationBrie: '',
  bankofDeposit: '',
  accountName: '',
  bankAccount: '',
  bankAddr: '',
  bankPhone: '',
  photo: '',
})
const ruleForm1 = reactive({
  id:'',
  suppliersName: '',
  suppliersCode: '',
  suppliersTypeId: '',
  province: '',
  city: '',
  contact: '',
  department: '',
  posts: '',
  officePhone: '',
  phone: '',
  companyProfile: '',
  cooperationBrie: '',
  bankofDeposit: '',
  accountName: '',
  bankAccount: '',
  bankAddr: '',
  bankPhone: '',
  photo: '',
})
const ruleFormDesc = ref({
  id:'',
  suppliersName: '',
  suppliersCode: '',
  suppliersTypeId: '',
  province: '',
  city: '',
  contact: '',
  department: '',
  posts: '',
  officePhone: '',
  phone: '',
  companyProfile: '',
  cooperationBrie: '',
  bankofDeposit: '',
  accountName: '',
  bankAccount: '',
  bankAddr: '',
  bankPhone: '',
  photo: '',
})

const rules = reactive({
  suppliersName: [
    { required: true, message: '供应商名称不能为空', trigger: 'blur' },
  
  ],
   contact: [
    { required: true, message: '联系人不能为空', trigger: 'blur' },

  ],
   department: [
    { required: true, message: '部门不能为空', trigger: 'blur' },

  ],
   posts: [
    { required: true, message: '职位不能为空', trigger: 'blur' },

  ],
   officePhone: [
    { required: true, message: '办公电话不能为空', trigger: 'blur' },

  ],
   phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },

  ],
   companyProfile: [
    { required: true, message: '公司简介不能为空', trigger: 'blur' },

  ],
   cooperationBrie: [
    { required: true, message: '合作情况不能为空', trigger: 'blur' },

  ],
   bankofDeposit: [
    { required: true, message: '开户银行不能为空', trigger: 'blur' },

  ],
   accountName: [
    { required: true, message: '银行账户不能为空', trigger: 'blur' },

  ],
   bankAccount: [
    { required: true, message: '账户名称不能为空', trigger: 'blur' },

  ],
   bankAddr: [
    { required: true, message: '银行地址不能为空', trigger: 'blur' },

  ],
   bankPhone: [
    { required: true, message: '银行手机号不能为空', trigger: 'blur' },

  ],
  
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      read.post("procurementwrite/api/Procurement/AddSuppliers",ruleForm).then(res=>{
        if(res.data.code==200){
          ElMessage.success(res.data.msg);
          dialogVisible.value=false;
          ruleForm.accountName="";
          ruleForm.bankAccount="";
          ruleForm.bankAddr="";
          ruleForm.bankPhone="";
          ruleForm.bankofDeposit="";
          ruleForm.city="";
          ruleForm.companyProfile="";
          ruleForm.contact="";
          ruleForm.cooperationBrie="";
          ruleForm.department="";
          ruleForm.officePhone="";
          ruleForm.phone="";
          ruleForm.photo="";
          ruleForm.posts="";
          ruleForm.province="";
          ruleForm.suppliersCode="";
          ruleForm.suppliersName="";
          ruleForm.suppliersTypeId="";
          getsuppliers();
        }
        else{
          ElMessage.error(res.data.msg);
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'



const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  
) => {
   ruleForm.photo=response.data;
}
const updatehandleAvatarSuccess: UploadProps['onSuccess'] = (
  response
) => {
   ruleForm1.photo=response.data;
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/png') {
    ElMessage.error('图片必须为png格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}
//供应商类型下拉框
const typedata=ref([{
  "id":'',
  "classifyName":''
}]);
const getcalssfiytype=()=>{
  read.get("procurementread/api/Procurement/GetType").then(res=>{
    typedata.value=res.data.data;
  })
}
interface Region {
  value: string; // 或其他类型
  label: string;
  children?: Region[]; // 可选子级
}
// 省份列表
const provinceList = regionData
// 城市列表
const cityList = ref<Region[]>([])
const handleProvinceChange = (provinceCode: string) => {
  ruleForm.city=''

  
  const province = regionData.find(item => item.label === provinceCode)
  if (province && province.children) {
    cityList.value = province.children
  } else {
    cityList.value = []
  }
}
console.log(regionData);
interface RowData {
  id:'',
  suppliersName: '',
  suppliersCode: '',
  suppliersTypeId: '',
  province: '',
  city: '',
  contact: '',
  department: '',
  posts: '',
  officePhone: '',
  phone: '',
  companyProfile: '',
  cooperationBrie: '',
  bankofDeposit: '',
  accountName: '',
  bankAccount: '',
  bankAddr: '',
  bankPhone: '',
  photo: '',
}
const dialogVisibleupdate=ref(false);
const openeidt=(row:RowData)=>{
    dialogVisibleupdate.value=true;
    Object.assign(ruleForm1,row);
}
const updatesubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      read.put("procurementwrite/api/Procurement/UpdateSuppliers",ruleForm1).then(res=>{
        if(res.data.code==200){
          ElMessage.success(res.data.msg);
          dialogVisibleupdate.value=false;
          ruleForm1.accountName="";
          ruleForm1.bankAccount="";
          ruleForm1.bankAddr="";
          ruleForm1.bankPhone="";
          ruleForm1.bankofDeposit="";
          ruleForm1.city="";
          ruleForm1.companyProfile="";
          ruleForm1.contact="";
          ruleForm1.cooperationBrie="";
          ruleForm1.department="";
          ruleForm1.officePhone="";
          ruleForm1.phone="";
          ruleForm1.photo="";
          ruleForm1.posts="";
          ruleForm1.province="";
          ruleForm1.suppliersCode="";
          ruleForm1.suppliersName="";
          ruleForm1.suppliersTypeId="";
          getsuppliers();
        }
        else{
          ElMessage.error(res.data.msg);
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
//删除
const delsupplier=(id:number)=>{
  ElMessageBox.confirm(
    '确认要删除吗？',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      read.put("procurementwrite/api/Procurement/DelSuppliers",{id:id}).then(res=>{
        if(res.data.code==200){
          ElMessage.success(res.data.msg);
        }
        else{
          ElMessage.error(res.data.msg);
        }
     })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
     
}

const dialogVisibledesc=ref(false);
const getsuppliersdesc=(id:number)=>{
  dialogVisibledesc.value=true;
  read.get("procurementread/api/Procurement/GetSuppliersDesc",{params:{id:id}}).then(res=>{
    ruleFormDesc.value=res.data.data
  })
}
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 20px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
